<template>
	<view>
		<view id="bankBox">
			<view class="">
				<label class="lable">银行卡号:</label>
				<input class="input" :class="{active:bank}" type="text" value="" v-model="user.number"/>
				<view class="text" v-if="bank">请输入银行卡号末四位</view>
			</view>
			<view class="">
				<label class="lable">支付密码:</label>
				<input class="input" :class="{active:pass}" type="text" value="" v-model="user.password"/>
				<view class="text" v-if="pass">请输入6位密码</view>
			</view>
		</view>
		<view class="boxFool" @tap="addbankcard">
			<text>点击添加</text>
		</view>
	</view>
</template>

<script>
	import {createNamespacedHelpers} from 'vuex'
	const {mapActions,mapState} = createNamespacedHelpers('bankcard')
	const {mapState:infoMapState} = createNamespacedHelpers('UserInfor')
	export default {
		data() {
			return {
				pass:false,
				bank:false,
				user:{
					number:'',///银行卡账号
					password:'', //支付密码
					type:"建设银行" ,//银行卡类型默认建设
					balance: 100000,///添加银行卡默认金额
					memberUsername:'' ///用户账号
				}
			}
		},
		computed:{
			...mapState(['status']),
			...infoMapState(['userData'])
		},
		methods: {
			...mapActions(['getBankCard','bindingcard','queryCardData']),
			///点击添加
			async addbankcard(){
				this.user.memberUsername = this.userData.username
				if(RegExp('^[0-9]{4}$').test(this.user.number)==false){
					this.bank=true
				}else if(RegExp('^[0-9A-Za-z]{6}$').test(this.user.password)==false){
					this.bank=false
					this.pass=true
				}else{
					this.pass=false
					///发送请求跳转页面
					await this.getBankCard(this.user) ////发送添加银行卡请求
					
					const data = await this.bindingcard(this.user) ///绑定银行卡
					this.queryCardData({username:this.userData.username})
					if(this.status==true && data.code==200){
						uni.showToast({
						    title: '添加成功',
						    duration: 2000
						});
						uni.navigateBack({
							url:'/pages/bankCardRecharge/bankCardRecharge'
						});
					}else{
						uni.showToast({
						    title: '卡号重复',
						    duration: 2000
						});
					}
					
					
					
				}
			
			}
		}
	}
</script>

<style>
	#bankBox{
		padding: 20rpx;
		width: 100%;
		height: auto;
		/* border: 1px solid red; */
	}
	.input{
		width: 90%;
		height: 75rpx;
		border: 1rpx solid rgba(0,0,0,0.2);
		margin: 10rpx;
		border-radius: 20rpx;
	}
	.active{
		border: 2rpx solid red;
	}
	.text{
		width: 80%;
		text-align: center;
		color: red;
		font-size: 26rpx;
	}
	.lable{
		color: rgba(0,0,0,0.8);
	}
	.boxFool{
		width: 100%;
		height: 88rpx;
		background-color: #3476F1;
		text-align: center;
		line-height: 88rpx;
		color: #FFFFFF;
		font-size: 36rpx;
		font-weight: 500;
		font-family: Lato;
		margin-top: 15rpx;
	}
</style>
